<!DOCTYPE html>
<html>
<head>
    <title>column</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <style>
        .box {
            column-width: 100px;
            column-count: 3;
            xcolumn-gap: 30px;
            width: 600px;
            height: 780px;
            border: 1px solid red;
            column-rule: 1px solid blue;

        }

        .item {
            height:100px;
            text-align: center;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
</body>
</html>
<!--

### column-count

设置被划分的列数

### column-gap

设置列之间的间隔

### column-rule

和border属性类似，比如`1px solid red`

是`column-rule-width`、`column-rule-style`、`column-rule-color`的简写

### column-span

指定元素应跨越多少列，用于子元素，可以使用all关键字表示跨域所有列

### column-width

为列指定建议的最佳宽度

### columns

简写

```
columns: column-width column-count;
```

-->